<template>
    <div :class="isChecked ? 'tag-checked' : 'tag-default'">
        {{ label }}
    </div>
</template>

<script lang="ts" setup>
defineProps({
    // 标签文本，最多支持7个字
    label: {
        type: [String, Number],
        default: '标签',
        required: true
    },
    // 标签值
    value: {
        type: [String, Number],
        default: ''
    },
    // 是否选中的样式
    isChecked: {
        type: Boolean,
        default: false
    }
});
</script>

<style lang="scss" scoped>
%tag {
    width: calc(33.3% - 8px);
    align-self: stretch;
    height: 32px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 6px;
    text-align: center;
    line-height: 32px;
    overflow: hidden;
}
.tag-default {
    @extend %tag;

    color: #333333;
    background: #f8f8f8;
}
.tag-checked {
    @extend %tag;

    color: #e60044;
    background: rgb(230 0 68 / 6%);
}
</style>
